<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>新增成功案例</title>


    <!-- Expand styles -->
    <link href="../css/app/app.css" rel="stylesheet">
    <link href="../css/app/default.css" rel="stylesheet">
    <link href="../css/mui/mui.css" rel="stylesheet">
    <link href="../css/mui/mui.picker.min.css" rel="stylesheet" />


    <!-- Custom styles for this template -->
    <!-- <link href="../css/iOS/mobile/mobile.css" rel="stylesheet"> -->
</head>

<body>
    <!-- header -->
    <div class="margin-b-60">
        <div class="list-group patient-list1 margin-b-i10">
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训类型</div>
                <div class="web-box2 nk-s text-right list-right" id="btn1">
                    <div class="display-flex align-items-center justify-content-center">
                        <input type="text" placeholder="请选择">
                        <!-- <span>请选择标签</span> -->
                        <img class="sele-icon" src="../img/next.png" />
                    </div>
                </div>
            </div>

            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训地点</div>
                <div class="web-box2 nk-s text-right list-right" id="btn2">
                    <div class="display-flex align-items-center justify-content-center">
                        <input type="text" placeholder="请选择">
                        <!-- <span>请选择标签</span> -->
                        <img class="sele-icon" src="../img/next.png" />
                    </div>
                </div>
            </div>

            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训开始时间</div>
                <div class="web-box2 nk-s text-right list-right" id="btn3">
                    <div class="display-flex align-items-center justify-content-center">
                        <input type="text" placeholder="请选择">
                        <!-- <span>请选择标签</span> -->
                        <img class="sele-icon" src="../img/next.png" />
                    </div>
                </div>
            </div>
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训截止时间</div>
                <div class="web-box2 nk-s text-right list-right" id="btn4">
                    <div class="display-flex align-items-center justify-content-center">
                        <input type="text" placeholder="请选择">
                        <!-- <span>请选择标签</span> -->
                        <img class="sele-icon" src="../img/next.png" />
                    </div>
                </div>
            </div>
        </div>
        <div class="list-group patient-list1 margin-b-i10">
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训主题</div>
                <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入培训联系人">
                </div>
            </div>

            <div class="list-cell text-cell">
                <div class="web-box1 list-left">培训人数</div>
                <div class="web-box2 nk-s text-right list-right display-flex">
                    <input type="number" placeholder="请输入培训人数">
                    <span class="padding-l-5 font-15 black">人</span>
                </div>
            </div>

            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训主办方</div>
                <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入培训主办方">
                </div>
            </div>
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">培训老师</div>
                <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入培训联系人">
                </div>
            </div>
            <div class="list-cell text-cell list-cell1">
                <div class="web-box1 list-left">详细地址</div>
                <div class="web-box2 nk-s text-right list-right"><input type="text" placeholder="请输入详细地址">
                </div>
            </div>

        </div>
        <!-- <div class="widget-default widget-body margin-b-10">

                    <div class="web-box1 list-left font-16 black">培训要求</div>
                    <div class="list-right">
                        <textarea class="no-margin info-textarea" type="text" placeholder="简单介绍一下你的培训要求吧！"></textarea>
                    </div>

                </div> -->

        <div class="widget-default widget-body">
            <div class="web-box1 list-left padding-b-10 font-15 black">培训图片</div>
            <div class="list-right">
                <img class="ser-img" src="../img/add-img.png" alt="">
            </div>

        </div>

    </div>
    <div class="save-btn hobby-footer1">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block bc-head">确认新增</button>
    </div>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/mui/mui.js"></script>
    <script type="text/javascript" src="../js/mui/mui.picker.min.js"></script>
    <script>
        $("#btn1").on("tap", function () {
            var picker = new mui.PopPicker();
            picker.setData([{
                    value: "zz",
                    text: "智子",
                    children: [{
                        value: "zz",
                        text: "智子",
                    }]
                },
                {
                    value: "second",
                    text: "第一项"
                }
            ]);
            picker.show(function (selectItems) {
                console.log(selectItems[0].text); //智子
                console.log(selectItems[0].value); //zz
            });
        });
        $("#btn2").on("tap", function () {
            var picker = new mui.PopPicker({
                layer: 3
            });
            picker.setData([{
                value: "110000",
                text: "北京市",
                children: [{
                    value: "110101",
                    text: "东城区",
                    children: [{
                        value: "110101",
                        text: "东城区",
                    }]
                }]
            }, {
                value: "120000",
                text: "天津市",
                children: [{
                    value: "120101",
                    text: "和平区",
                    children: [{
                        value: "110101",
                        text: "东城区",
                    }]
                }, {
                    value: "120102",
                    text: "河东区",
                    children: [{
                        value: "110101",
                        text: "东城区",
                    }]
                }, {
                    value: "120104",
                    text: "南开区",
                    children: [{
                        value: "110101",
                        text: "东城区",
                    }]
                }]
            }])
            picker.pickers[0].setSelectedIndex(1);
            picker.pickers[1].setSelectedIndex(1);
            picker.pickers[2].setSelectedIndex(1);
            picker.show(function (SelectedItem) {
                console.log(SelectedItem);
            })
        });
        $("#btn3").on("tap", function () {
            var dtpicker = new mui.DtPicker({
                type: "datetime", //设置日历初始视图模式 
                // beginDate: new Date(2015, 04, 25),//设置开始日期 
                // endDate: new Date(2016, 04, 25),//设置结束日期 
                // labels: ["Year", "Mon", "Day", "Hour", "min"],//设置默认标签区域提示语 
                customData: {
                    h: [{
                            value: "11",
                            text: "11"
                        },
                        {
                            value: "12",
                            text: "12"
                        }
                    ]
                } //时间/日期别名 
            })
            dtpicker.show(function (e) {
                console.log(e);
            })
        });
        $("#btn4").on("tap", function () {
            var dtpicker = new mui.DtPicker({
                type: "datetime", //设置日历初始视图模式 
                customData: {
                    h: [{
                            value: "7",
                            text: "7"
                        },
                        {
                            value: "6",
                            text: "6"
                        }
                    ]
                } //时间/日期别名 
            })
            dtpicker.show(function (e) {
                console.log(e);
            })
        });
    </script>

</body>

</html>